<template>
    <div class="foods-item" @click="$router.push({name:'FoodsDetails',query:{fid:foodsData.fid}})">
        <div class="left-img" @click.stop="preImg(foodsData.img)">
            <img v-lazy="baseURL+foodsData.img" alt="">
        </div>
        <ul class="right-box" v-longpress="operationFood">
            <li class="foods-name">{{foodsData.fname}}</li>
            <li>月售：{{foodsData.salecount}}</li>
            <li class="price">
                <div>价格：{{foodsData.price}}</div>
                <div v-if="foodsData.windos">
                    <span class="iconfont icondizhi"></span>
                    <span>{{foodsData.windos.wname}}</span>
                </div>
            </li>
        </ul>
        <div class="collection">
            <span class="iconfont iconshoucang"></span>
        </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from "vuex"
    export default {
        name: "FoodsItem",
        props: {
            foodsData: {
                typeof: Object,
                require: true
            }
        },
        methods: {
            ...mapActions(["preImgShowOrHide","showActionSheet"]),
            toFoodsDetsils() {
                this.$router.push({
                    name: "FoodsDetails",
                });
            },
            preImg(imgURL) {
                this.preImgShowOrHide([imgURL]);
            },
            operationFood() {
                this.showActionSheet({
                    list: ["添加收藏", "查看详细"],
                    success: function (index) {
                        //这个success是一个方法
                        if (index == 0) {
                            console.log("点击的是添加收藏");
                        } else if (index == 1) {
                            console.log("你点击的是查看详细");
                        } 
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .foods-item {
        @include flexbox();
        height: 90px;
        padding: 5px;
        position: relative;
        border-bottom: 1px solid lightgray;

        .left-img {
            width: 100px;

            >img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .right-box {
            flex: 1;
            font-size: 14px;
            @include flexbox(column, space-between);
            margin-left: 10px;
            color: red;

            .foods-name {
                font-size: 20px;
                font-weight: bold;
                color: black;
            }

            .price {
                @include flexbox(row, space-between);
                color: #333333;
            }

        }

        .collection {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 24px;
            height: 24px;
            box-shadow: 0px 0px 10px lightgreen;
            border-radius: 50%;
            color: red;
            font-size: 16px;
            @include flexbox(row, center, center)
        }
    }
</style>